<template>
    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
        <Row :gutter="24" type="flex">
            <Col v-bind="grid">
                <Input v-model="data.name" placeholder="请输入患者姓名/手机号/诊疗号" element-id="name" clearable @on-blur="onSearchItem" @on-enter="onSearchItem"  @on-clear="onSearchItem"/>
            </Col>
            <Col v-bind="grid">
                <FormItem label="归属人" prop="personnel" label-for="personnel">
                    <Select v-model="data.personnel" placeholder="归属人" element-id="personnel" clearable @on-change="onSearchItem" @on-clear="onSearchItem">
                        <Option v-for="items in members" :key="'member' + items.id" :value="items.id" :disabled="+items.status === 0">{{items.name}}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col v-bind="grid">
                <FormItem label="就诊类型" prop="disease" label-for="disease">
                    <Select v-model="data.diagnosis" placeholder="就诊类型" element-id="diagnosis" clearable @on-change="onSearchItem" @on-clear="onSearchItem">
                        <Option v-for="items in types" :key="'type' + items.id" :value="items.id" :disabled="+items.status === 0">{{items.name}}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="标签" prop="label" label-for="label">
                    <Select v-model="data.label" filterable multiple @on-change="onSearchItem" @on-clear="onSearchItem">
                        <OptionGroup v-for="items in labels" :key="'group' + items.id" :label="items.name">
                            <Option v-for="item in items.children" :value="item.id" :key="'label'+item.id" :disabled="+item.status === 0">{{ item.name }}</Option>
                        </OptionGroup>
                    </Select>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="未访时间">
                    <Select v-model="data.overdue" :max-tag-count="2" clearable @on-change="onSearchItem" @on-clear="onSearchItem">
                        <Option v-for="item in overdueList" :value="item.value" :key="item.value" :disabled="+item.status === 0">{{ item.label }}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="3">
                <FormItem label="住院状态" prop="in_hospital" label-for="in_hospital">
                    <Select transfer v-width="140" v-model="data.in_hospital"  element-id="in_hospital"  placeholder="请选择状态" :clearable="true" @on-change="onSearchItem" @on-clear="onSearchItem">
                        <Option v-for="items in hospital" :key="'label'+items.value" :value="items.value" >{{items.label}}</Option>
                    </Select>
                </FormItem>
            </Col>
        </Row>
    </Form>
</template>
<script>
    import { mapState } from 'vuex';
    export default {
        data () {
            return {
                startDate: new Date(),
                grid: {
                    xl: 4,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    name: '',
                    overdue: '1',
                    consultant: '',
                    personnel: '',
                    diagnosis: '',
                    label: [],
                    in_hospital:''
                },
                rules: {

                },
                overdueList: [
                    {
                        value: '1',
                        label: '昨天'
                    },
                    {
                        value: '2',
                        label: '10天以内'
                    },
                    {
                        value: '3',
                        label: '10-20天'
                    },
                    {
                        value: '4',
                        label: '20-40天'
                    },
                    {
                        value: '5',
                        label: '40-60天'
                    },
                    {
                        value: '6',
                        label: '60天以上'
                    }
                ]
            }
        },
        props: ['labels', 'members', 'types','hospital'],
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 80;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        created () {
            let jumpPage = window.localStorage.getItem('jumpDetail')
            if (jumpPage) {
                let parsePage = JSON.parse(jumpPage)
                this.data.personnel = parsePage.belong.toString()
            }
            this.$emit('search', this.data)
        },
        destroyed () {
            window.localStorage.removeItem('jumpDetail')
        },
        methods: {
            onSearchItem (val, v) {
                this.$emit('search', this.data)
            },
            getNowDay () {
                const now = new Date()
                const time = (now).getTime() - 24 * 60 * 60 * 1000
                this.yesterdayT = new Date(time)
                this.ruleFrom.time = [this.yesterdayT, this.yesterdayT]
            }
        }
    }
</script>
